<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            background-image: url("image/background.jpg");
            background-size: cover;
            /*居中对齐*/
            text-align: center;
            color: black;
            /*字体设置*/
            font-family: Microsoft YaHei, Segoe UI, Tahoma, Arial, Verdana, sans-serif;
        }

        page-container {
            width: 350px;
            height: auto;
            margin: 120px auto 0 auto;
        }

        form {
            margin-top: 150px;
        }

        .submit_button {
            cursor: pointer;
            width: 180px;
            height: 44px;
            margin-top: 50px;
            padding: 0;
            background: rgb(3, 116, 97);
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            border: 1px solid #03857a;
            -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            font-family: 'PT Sans', Helvetica, Arial, sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            -o-transition: all .2s;
            -moz-transition: all .2s;
            -webkit-transition: all .2s;
            -ms-transition: all .2s;
        }

        .submit_button:hover {
            -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
        }

        .submit_button:active {
            -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 5px 8px 0 rgba(0, 0, 0, .1) inset,
            0 1px 4px 0 rgba(0, 0, 0, .1);

            border: 0px solid #ef4300;
        }

        .connect {
            width: 305px;
            margin: 20px auto 0 auto;
            font-size: 18px;
            font-weight: 700;
            text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
        }

        .connect a {
            display: inline-block;
            width: 32px;
            height: 35px;
            margin-top: 15px;
            -o-transition: all .2s;
            -moz-transition: all .2s;
            -webkit-transition: all .2s;
            -ms-transition: all .2s;
        }

        .connect a.qq {
            background: url(image/ico1.png) center center no-repeat;
            margin: 10px;
            background-size: 20px;
        }

        .connect a.wechat {
            background: url(image/ico2.png) center center no-repeat;
            margin: 10px;
            background-size: 20px;
        }

        .connect a:hover {
            background-position: center bottom;
        }

        .inputer {
            width: 250px;
            height: 42px;
            /*上边外距*/
            margin-top: 25px;
            padding: 0 15px;
            background: #2d2d2d; /* browsers that don't support rgba */
            /*运行对颜色值设置透明度*/
            background: rgba(45, 45, 45, .15);
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            border: 1px solid #3d3d3d; /* browsers that don't support rgba */
            border: 1px solid rgba(255, 255, 255, .15);
            -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
            -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
            font-family: 'PT Sans', Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            -o-transition: all .2s;
            -moz-transition: all .2s;
            -webkit-transition: all .2s;
            -ms-transition: all .2s;
        }

        .inputer:-moz-placeholder {
            color: #fff;
        }

        .inputer:-ms-input-placeholder {
            color: #fff;
        }

        .inputer::-webkit-input-placeholder {
            color: #fff;
        }

        .inputer:focus {
            outline: none;
            -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
        }

        .op {
            width: 280px;
            height: 42px;
            /*上边外距*/
            margin-top: 25px;
            padding: 0 15px;
            background: #2d2d2d; /* browsers that don't support rgba */
            /*运行对颜色值设置透明度*/
            background: rgba(45, 45, 45, .15);
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            border: 1px solid #3d3d3d; /* browsers that don't support rgba */
            border: 1px solid rgba(255, 255, 255, .15);
            -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
            -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
            font-family: 'PT Sans', Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            -o-transition: all .2s;
            -moz-transition: all .2s;
            -webkit-transition: all .2s;
            -ms-transition: all .2s;
        }

        .op:focus {
            outline: none;
            -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset,
            0 2px 7px 0 rgba(0, 0, 0, .2);
        }
    </style>
</head>

<body>
<div id="app" style="width:50%;margin:30px auto;" class="page-container">
        <div>
            <h1 class="heading">登录</h1>
            <p>{{msg}}</p>
        </div>
        <div>
            <div style="color: #1b6d85"></div>
            <select name="person" class="op" v-model="usermodel.person">
                <option value="1">学生</option>
                <option value="2">老师</option>
                <option value="3">管理员</option>
            </select></br>
            <input type="text" v-model="usermodel.username" placeholder="请输入姓名" class="inputer" name="username" autofocus></br>
            <input type="text" v-model="usermodel.password" placeholder="请输入密码" show-password class="inputer" name="password"></br>

            <input type="button" value="登录" @click="onSubmit" class="submit_button">
        </div>

        <div>
            <a href="html/SignUp.html"
               style="font-size: 15px;color: #fff;margin-right: 20px;text-decoration: none"><span>注册账号</span></a>
            <!--                &lt;!&ndash;            找回密码 暂未添加&ndash;&gt;-->
            <a href="#"
               style="font-size: 15px;color: #fff;margin-left: 20px;text-decoration: none"><span>忘记密码</span></a>
        </div>
    </br>
    <div class="connect">
        <p>快捷登录</p>
        <p>
            <a class="qq" href="">
            </a>
            <a class="wechat" href="">
            </a>
        </p>
    </div>
</div>
<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            usermodel:{
                username:'',
                password:'',
                person:''
            },
            msg:'',
            success:false,
            user:{},
            rules:{
                username:[{required: true, message: '用户名不能为空',trigger: 'blur'}],
                password:[{required: true, message: '密码不能为空',trigger: 'blur'}],
            }
        },
        // created(){
        //     this.onSubmit()
        // },
        methods:{
            onSubmit(){
                axios.post('/login/login',this.usermodel).then(response=>{
                    let code = response.data.code;
                    if (this.usermodel.person == 1){
                        if (code == 200){
                            //页面跳转  后面的值是相对路径
                            window.location.href = "html/index.html";
                        }else {
                            window.location.href = "login.html";
                        }
                    }else if (this.usermodel.person == 2){
                        if (code == 200){
                            window.location.href = "html/teacher.html";
                        }else {
                            window.location.href = "login.html";
                        }
                    }else {
                        if (code == 200){
                            window.location.href = "html/manager.html";
                        }else {
                            window.location.href = "login.html";
                        }
                    }
                    })

            }
        }
    })
</script>
</body>

</html>